<template>
  <div class="app-container">
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item >
    <el-select
      v-model="queryParams.waterie"
      placeholder="请选择出入口"
      clearable
      @change="handleFilter0"
    >
      <el-option
        v-for="item in dict.type.water_ie"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
</el-form-item>
<el-form-item >
    <el-select
      v-model="queryParams.waterType"
      placeholder="请选择数据类型"
      clearable
      @change="handleFilter1"
    >
      <el-option
        v-for="item in dict.type.water_type"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
</el-form-item>
  <el-form-item >
    <el-select
      v-model="queryParams.waterData"
      placeholder="请选择具体想要的值"
      clearable
      @change="handleFilter2"
    >
      <el-option
        v-for="item in dict.type.water_data"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
      </el-form-item>
  <el-form-item >
    <el-date-picker
      v-model="queryParams.startTime"
      type="datetime"
      placeholder="选择开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      style="width: 100%"
    />

  </el-form-item>
          <el-form-item >
            <el-date-picker
      v-model="queryParams.endTime"
      type="datetime"
      placeholder="选择结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      style="width: 100%"
    />
          </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
               <!-- <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:quality:remove']"
        >删除</el-button> -->
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">

      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:quality:export']"
        >导出</el-button>
      </el-col> -->
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->

    <el-table class="compact-table"  v-loading="loading" :data="qualityList" @selection-change="handleSelectionChange">
    <div v-if="timeshow">
      <el-table-column v-show="false" align="center" />
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="出入口" align="center" prop="stype" width="85" />
      <!-- <el-table-column label="操作" width="75" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:quality:remove']"
          >删除</el-button>
        </template>
      </el-table-column> -->
      <el-table-column label="时间" align="center" prop="dataTime" width="85" />
    </div>
      <div v-if="fields.phshow">
          <el-table-column label="PH采样时间" align="center" prop="w01001Sampletime" width="85" />
           <div v-if="fields2.min"><el-table-column label="PH最小值" align="center" prop="w01001Min" width="75" /></div>
           <div v-if="fields2.max"><el-table-column label="PH最大值" align="center" prop="w01001Max" width="75" /></div>
           <div v-if="fields2.avg"><el-table-column label="PH平均值" align="center" prop="w01001Avg" width="75" /></div>
           <div v-if="fields2.cou"><el-table-column label="PH累计值" align="center" prop="w01001Cou" width="75" /></div>
           <div v-if="fields2.flag"><el-table-column label="PH数据标志(N=正常)" align="center" prop="w01001Flag" width="90" /></div>
           <div v-if="fields2.rtd"><el-table-column label="PH实时值" align="center" prop="w01001Rtd" width="75" /></div>
      </div>
      <div v-if="fields.shuiwen">
          <el-table-column label="水温采样时间" align="center" prop="w01010Sampletime" width="85" />
          <el-table-column v-if="fields2.min" label="水温最小值(℃)" align="center" prop="w01010Min" width="70" />
          <el-table-column v-if="fields2.max" label="水温最大值(℃)" align="center" prop="w01010Max" width="70" />
          <el-table-column v-if="fields2.avg" label="水温平均值(℃)" align="center" prop="w01010Avg" width="70" />
          <el-table-column v-if="fields2.cou" label="水温累计值" align="center" prop="w01010Cou" width="70" />
          <el-table-column v-if="fields2.flag" label="水温数据标志(N=正常)" align="center" prop="w01010Flag" width="90" />
          <el-table-column v-if="fields2.rtd" label="水温实时值(℃)" align="center" prop="w01010Rtd" width="70" />
      </div>
      <div v-if="fields.adndan">
          <el-table-column label="氨氮采样时间" align="center" prop="w21003Sampletime" width="85" />
          <el-table-column v-if="fields2.min" label="氨氮最小值(mg/L)" align="center" prop="w21003Min" width="75" />
          <el-table-column v-if="fields2.max" label="氨氮最大值(mg/L)" align="center" prop="w21003Max" width="75" />
          <el-table-column v-if="fields2.avg" label="氨氮平均值(mg/L)" align="center" prop="w21003Avg" width="75" />
          <el-table-column v-if="fields2.cou" label="氨氮累计值" align="center" prop="w21003Cou" width="60" />
          <el-table-column v-if="fields2.flag" label="氨氮数据标志(N=正常)" align="center" prop="w21003Flag" width="90" />
          <el-table-column v-if="fields2.rtd" label="氨氮实时值(mg/L)" align="center" prop="w21003Rtd" width="75" />
      </div>
      <div v-if="fields.zonglin">
          <el-table-column label="总磷采样时间" align="center" prop="w21011Sampletime" width="85" />
          <el-table-column v-if="fields2.min" label="总磷最小值(mg/L)" align="center" prop="w21011Min" width="75" />
          <el-table-column v-if="fields2.max" label="总磷最大值(mg/L)" align="center" prop="w21011Max" width="75" />
          <el-table-column v-if="fields2.avg" label="总磷平均值(mg/L)" align="center" prop="w21011Avg" width="75" />
          <el-table-column v-if="fields2.cou" label="总磷累计值" align="center" prop="w21011Cou" width="60" />
          <el-table-column v-if="fields2.flag" label="总磷数据标志(N=正常)" align="center" prop="w21011Flag" width="90" />
          <el-table-column v-if="fields2.rtd" label="总磷实时值(mg/L)" align="center" prop="w21011Rtd" width="75" />
      </div>
      <div v-if="fields.wushui">
          <el-table-column label="污水采样时间" align="center" prop="w00000Sampletime" width="85" />
          <el-table-column v-if="fields2.min" label="污水最小值(mg/L)" align="center" prop="w00000Min" width="75" />
          <el-table-column v-if="fields2.max" label="污水最大值(mg/L)" align="center" prop="w00000Max" width="75" />
          <el-table-column v-if="fields2.avg" label="污水平均值(mg/L)" align="center" prop="w00000Avg" width="75" />
          <el-table-column v-if="fields2.cou" label="污水累计值" align="center" prop="w00000Cou" width="75" />
          <el-table-column v-if="fields2.flag" label="污水数据标志(N=正常)" align="center" prop="w00000Flag" width="90" />
          <el-table-column v-if="fields2.rtd" label="污水实时值(mg/L)" align="center" prop="w00000Rtd" width="75" />
      </div>
      <div v-if="fields.zongdan">
            <el-table-column label="总氮采样时间" align="center" prop="w21001Sampletime" width="85" />
            <el-table-column v-if="fields2.min" label="总氮最小值(mg/L)" align="center" prop="w21001Min" width="75" />
            <el-table-column v-if="fields2.max" label="总氮最大值(mg/L)" align="center" prop="w21001Max" width="75" />
            <el-table-column v-if="fields2.avg" label="总氮平均值(mg/L)" align="center" prop="w21001Avg" width="75" />
            <el-table-column v-if="fields2.cou" label="总氮累计值" align="center" prop="w21001Cou" width="75" />
            <el-table-column v-if="fields2.flag" label="总氮数据标志(N=正常)" align="center" prop="w21001Flag" width="120" />
            <el-table-column v-if="fields2.rtd" label="总氮实时值(mg/L)" align="center" prop="w21001Rtd" width="75" />
      </div>
      <div v-if="fields.hxxy">
          <el-table-column label="化学需氧量采样时间" align="center" prop="w01018Sampletime" width="85" />
          <el-table-column  v-if="fields2.min" label="化学需氧量最小值(mg/L)" align="center" prop="w01018Min" width="100" />
          <el-table-column  v-if="fields2.max" label="化学需氧量最大值(mg/L)" align="center" prop="w01018Max" width="100" />
          <el-table-column v-if="fields2.avg" label="化学需氧量平均值(mg/L)" align="center" prop="w01018Avg" width="100" />
          <el-table-column v-if="fields2.cou" label="化学需氧量累计值" align="center" prop="w01018Cou" width="95" />
          <el-table-column v-if="fields2.flag" label="化学需氧量数据标志(N=正常)" align="center" prop="w01018Flag" width="120" />
          <el-table-column  v-if="fields2.rtd"label="化学需氧量实时值(mg/L)" align="center" prop="w01018Rtd" width="100" />
          <!-- 注释部分保持原样 -->
          <!-- <el-table-column label="QN" align="center" prop="QN" />
          <el-table-column label="ST" align="center" prop="ST" />
          <el-table-column label="CN" align="center" prop="CN" />
          <el-table-column label="MN" align="center" prop="MN" />
          <el-table-column label="fields2.flag" align="center" prop="fields2.flag" /> -->
         </div>
      <div v-if="fields.zongliang">
          <el-table-column label="总量采样时间" align="center" prop="w00000lSampletime" width="75" />
          <el-table-column v-if="fields2.min" label="总量数据最小值" align="center" prop="w00000lMin" width="75" />
          <el-table-column v-if="fields2.max" label="总量数据最大值" align="center" prop="w00000lMax" width="75" />
          <el-table-column v-if="fields2.avg" label="总量数据平均值" align="center" prop="w00000lAvg" width="75" />
          <el-table-column v-if="fields2.cou" label="总量数据计数" align="center" prop="w00000lCou" width="75" />
          <el-table-column v-if="fields2.flag" label="总量状态标志" align="center" prop="w00000lFlag" width="75" />
          <el-table-column v-if="fields2.rtd" label="总量实时数据" align="center" prop="w00000lRtd" width="75" />
      </div>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listQuality, getQuality, delQuality, addQuality, updateQuality } from "@/api/system/quality";

export default {
    name: "Quality",
    dicts: ['water_type', 'water_data', 'water_ie'],
  data() {
    return {

      timeshow:true,

      fields:{
          phshow: true,
          zonglin: true,
          zongliang: true,
          zongdan: true,
          adndan: true,
          hxxy: true,
          shuiwen: true,
          wushui: true
      },
    fields2:{
      min:true,
      max:true,
      avg:true,
      cou:true,
      flag:true,
      rtd:true,
      },


      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 出口水质监测（全参数）表格数据
      qualityList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        waterie:'export',
        filterStatus: null,
        filterType: null,
        startTime: null,
        endTime: null,
        waterType: null,
        waterData: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {

      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询出口水质监测（全参数）列表 */
    handleFilter0(activeField) {
         this.handleQuery();
    },
     handleFilter1(activeField) {
      for (const field in this.fields) {
          this.fields[field] = field === activeField;
          if(this.fields[field]){
            this.queryParams.waterType=field;
          }
      }
      console.log(this.queryParams.waterType)
      console.log(this.fields)
      if(activeField==null || activeField==''){
          this.fields = {
              phshow: true,
              zonglin: true,
              zongliang: true,
              zongdan: true,
              adndan: true,
              hxxy: true,
              shuiwen: true,
              wushui: true
          }
      }
         this.getList()
    },

   handleFilter2(activeField) {
      for (const field in this.fields2) {
          this.fields2[field] = field === activeField;
          if(this.fields2[field]){
            this.queryParams.waterData=field;
          }
      }
      console.log(this.queryParams.waterData)
      console.log(this.fields2)
      if(activeField==null || activeField==''){
          this.fields2={
              min:true,
              max:true,
              avg:true,
              cou:true,
              flag:true,
              rtd:true,
          }
      }
      this.getList()
    },
    getList() {
      this.loading = true;
      listQuality(this.queryParams).then(response => {
        this.qualityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
              // ... existing params ...
        filterStatus: null,
        filterType: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
         // 添加时间范围校验
      if (this.queryParams.endTime && this.queryParams.startTime > this.queryParams.endTime) {
        this.msgError("结束时间不能早于开始时间");
        return;
      }
      this.queryParams.pageNum = 1;
      console.log(this.queryParams)
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
              // ... existing params ...
        waterie:'export',
        filterStatus: null,
        filterType: null,
        startTime: null,
        endTime: null,
        waterType: null,
        waterData: null,
      };
      this.fields = {
          phshow: true,
          zonglin: true,
          zongliang: true,
          zongdan: true,
          adndan: true,
          hxxy: true,
          shuiwen: true,
          wushui: true
      },
          this.fields2={
              min:true,
              max:true,
              avg:true,
              cou:true,
              flag:true,
              rtd:true,
          }
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加出口水质监测（全参数）";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getQuality(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改出口水质监测（全参数）";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateQuality(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addQuality(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除数据项？').then(function() {
        return delQuality(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/quality/export', {
        ...this.queryParams
      }, `quality_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped>
/* 紧凑型表格样式 */
.compact-table ::v-deep .el-table__row {
  line-height: 28px;
}
.compact-table ::v-deep .el-table__cell {
  padding: 4px 0;
  font-size: 12px;
}
.compact-table ::v-deep .el-table__header th {
  padding: 8px 0;
}
</style>
